<template>
  <ContentCard>
    <template #header>
      <pageHeaderNew
        title="工号规则设置"
        :breadCrumb="['人事', '基础设置', '工号规则设置']"
        showBack
      >
        <a-button type="primary" @click="goEdit(null)">
          新增工号生成方案</a-button
        >
      </pageHeaderNew>
    </template>
    <TableTurn :tableData="GetSchemeData" ref="tableRef">
      <a-table-column :width="80">
        <template #title> 序号 </template>
        <template #cell="{ rowIndex }">
          {{ rowIndex + 1 }}
        </template>
      </a-table-column>
      <a-table-column
        :width="200"
        dataIndex="name"
        title="方案名称"
      ></a-table-column>
      <a-table-column
        :width="200"
        dataIndex="positionSequenceId"
        title="所属公司"
      >
        <template #cell="{ record }">
          {{
            organizationList?.find(
              (el: any) => el.id === record.positionSequenceId
            )?.name
          }}
        </template>
      </a-table-column>
      <a-table-column
        :width="200"
        dataIndex="example"
        title="流水号示例"
      ></a-table-column>
      <a-table-column :width="150" dataIndex="idDown" title="是否全局启用">
        <template #title>
          <span>是否全局启用</span>
          <a-tooltip
            content="当上一级的组织开了全局启用,那么该组织下面的其他组织都不能开启全局启用！(若要开启请先将上级组织的全局启用关闭！)"
          >
            <icon-info-circle-fill style="color: #165dff" />
          </a-tooltip>
        </template>
        <template #cell="{ record }">
          <a-switch
            v-model="record.isDown"
            :checked-value="1"
            :unchecked-value="2"
            @change="changeEnable(record)"
            :disabled="record.enable === 2"
          />
        </template>
      </a-table-column>
      <a-table-column title="操作" :width="120" fixed="right">
        <template #cell="{ record }">
          <a-space :size="0">
            <a-tooltip content="预览">
              <icon-eye
                size="20"
                @click="look(record, 'see')"
                style="
                  padding-bottom: 3px;
                  padding-right: 10px;
                  color: #5085ff;
                  cursor: pointer;
                "
              />
            </a-tooltip>
            <a-tooltip content="编辑">
              <icon-font
                type="icon-edit"
                :size="26"
                @click="goEdit(record)"
                :style="{
                  cursor: 'pointer'
                }"
              />
            </a-tooltip>
          </a-space>
        </template>
      </a-table-column>
    </TableTurn>
  </ContentCard>
  <Modals
    v-model:visible="visible"
    :oldData="data"
    :editName="editName"
    :refreshFn="refresh"
    :show="islook"
  />
</template>

<script lang="ts" setup>
import { controldataTreeFilter, dealTreeData, flatTree } from '@/utils/utils';
import { Message } from '@arco-design/web-vue';
import Modals from './Modals.vue';
import { GetOrganizationList } from '@/apis/management/organization/organizationManagement/index';
import {
  GetManual,
  EditManual,
  GetScheme,
  ChangeSchemeType,
  DelScheme,
  EditAllScheme,
  GetlistData
} from '@/apis/management/personnel/baseSetting/TransactionSetting';

import type { draggableType } from '@/components/TableTurn/index.vue';
import * as typeObj from '@/apis/management/personnel/baseSetting/TransactionSetting/type';
// 存储编辑数据
let data = ref();
// 编辑方案名称
let editName = ref();
// 表格ref
const tableRef = ref();

// 部门数据
let organizationList = ref();

// 获取部门数据
const getOrganizationList = async () => {
  const res: any = await GetOrganizationList({});
  organizationList.value = flatTree(dealTreeData(res));
};
getOrganizationList();
// 获取智能工号详细数据
const GetSchemeData = async (page: typeObj.settingPage) => {
  try {
    const res: any = await GetScheme({ ...page });
    return Promise.resolve(res);
  } catch (error: unknown) {
    console.log(error);
  }
};

// 修改启用状态
const changeEnable = async ({ id, isDown }: { id: number; isDown: number }) => {
  try {
    //
    await ChangeSchemeType({
      id,
      type: isDown as 1 | 2
    });
    refresh();
  } catch (error: unknown) {
    console.log(error);
  }
};

// 删除表格数据
const del = async (data: any) => {
  if (data.nowValue !== '') return Message.error('该工号被适用无法被删除');

  await DelScheme({ ids: [data.id] });
  refresh();
};
const visible = ref(false);
// 编辑表格数据
const goEdit = (oldData: typeObj.schemeType | null) => {
  // if (oldData.nowValue !== '') return Message.error('该工号被适用无法被编辑');
  data.value = oldData;
  console.log(1111, data.value);
  if (data.value) {
    editName.value = data.value.name;
  }
  islook.value = false;
  visible.value = true;
};

const look = (oldData: typeObj.schemeType, type: string) => {
  data.value = oldData;
  visible.value = true;
  islook.value = true;
};
const islook = ref(false);

// 刷新表格数据
const refresh = () => {
  tableRef.value.loadData();
};
</script>
<style lang="less" scoped>
.span-icon {
  width: 5px;
  height: 25px;
  background-color: #3d7eff;
  border-radius: 6px;
}
.enable::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  position: relative;
  right: 3px;
  background-color: var(--enable);
}
</style>
